<template>
    <div>
        <h3 class="dialog-plate-title"><span>摘要内容</span></h3>
        <div>
            <div>
                <div v-html="abstractDetail.content"></div>
            </div>
        </div>
        <h3 class="dialog-plate-title"><span>修改记录</span></h3>
         <el-button type="success" @click="isShowDialog2('insert')">申请修改</el-button>
         <el-table :data="changeRecords" :header-cell-style="getRowClass" height="500px">
            <el-table-column prop="code" label="文献编码" sortable width="130" align="center"></el-table-column>
            <el-table-column prop="docName" show-overflow-tooltip label="文献名称"></el-table-column>
            <el-table-column prop="docType" label="文献类型" width="180"></el-table-column>
            <el-table-column prop="publications" label="发表刊物" width="180"></el-table-column>
            <el-table-column prop="publisher" label="发表人" width="180"></el-table-column>
            <el-table-column prop="publishTime" label="发表时间"  width="180"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="deleteDate('abstractLiterature',scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <h3 class="dialog-plate-title"><span>关联文献</span></h3>
        <el-button type="success"  icon="el-icon-plus" @click="isShowDialog1('insert')">新增</el-button>
        <el-table :data="aboutAbstractList" :header-cell-style="getRowClass" height="500px">
            <el-table-column prop="code" label="文献编码" sortable width="130" align="center"></el-table-column>
            <el-table-column prop="docName" show-overflow-tooltip label="文献名称"></el-table-column>
            <el-table-column prop="docType" label="文献类型" width="180"></el-table-column>
            <el-table-column prop="publications" label="发表刊物" width="180"></el-table-column>
            <el-table-column prop="publisher" label="发表人" width="180"></el-table-column>
            <el-table-column prop="publishTime" label="发表时间"  width="180"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="deleteDate('abstractLiterature',scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
         <el-dialog :title="dialog.title" width="1200px" top="40px"  center :visible.sync="dialog.isShow" :close-on-click-modal="false" :append-to-body='true'>
            <h3 class="dialog-plate-title"><span>标签筛选</span></h3>
            <el-checkbox-group v-model="selectTags">
                <el-checkbox v-for="item in tagList" :label="item.id" :key="item.id">
                    <el-tag v-for="tag in tagType" :key="tag.name" :type="tag.color" v-if="tag.value===item.type"> {{item.name}}</el-tag>
                </el-checkbox>
                <el-button @click="searchLiterature()" type="success">筛选</el-button>
            </el-checkbox-group>
            <el-table :data="literatureList" :highlight-current-row="true" height="400px" stripe border class="table-index"  style="width: 100%;"  :header-cell-style="getRowClass" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="code" label="文献编码" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
                <el-table-column prop="docName" label="文献名称" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
                <el-table-column prop="docType" label="文献类型" show-overflow-tooltip	sortable min-width="100" align="center"></el-table-column>
                <el-table-column prop="publications" label="发表刊物" show-overflow-tooltip	sortable min-width="100" align="center"></el-table-column>
                <el-table-column prop="publisher" label="发表人" show-overflow-tooltip	 sortable min-width="90" align="center"></el-table-column>
                <el-table-column prop="publishTime" label="发表时间" sortable min-width="120" align="center"></el-table-column>
                <el-table-column prop="creatorName" label=" 上传人" show-overflow-tooltip sortable  min-width="90" align="center"></el-table-column>
                <el-table-column prop="createTime" label="上传时间" sortable min-width="120" align="center"></el-table-column>
            </el-table>
            <el-button @click="addRelation()" type="success" style="margin:16px 0;">点击关联选中文献</el-button>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        </el-dialog>
        <el-dialog :title="dialog2.title" width="1200px" top="40px"  center :visible.sync="dialog2.isShow" :close-on-click-modal="false" :append-to-body='true'>
            <el-form ref="form" :model="dialog2.formDate" label-width="80px">
                <el-form-item label="摘要内容">
                     <quill-editor v-model="dialog2.formDate.afterContent" style="padding-right: 10px;margin-left:10px;"></quill-editor>
                </el-form-item>
                <el-form-item label="修改说明">
                    <el-input v-model="dialog2.formDate.updateReason"  type="textarea" :rows="2" placeholder="请输入修改说明"></el-input>
                </el-form-item>
                <el-row :gutter="24" v-if="dialog2.title.indexOf('新增')>-1">
                    <el-col :span="6">
                        <el-form-item label="修改人" >
                            <el-input v-model="dialog2.formDate.creatorName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请时间">
                            <el-input v-model="dialog2.formDate.createTime" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审核人">
                            <el-input v-model="dialog2.formDate.approverName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审核时间">
                            <el-input v-model="dialog2.formDate.approveTime" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

             <div slot="footer">
                  <el-button @click="sublimit"  type="success" style="margin:16px 0;">确认</el-button>
             </div>
        </el-dialog>
    </div>
</template>
<script>
 import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import {quillEditor} from 'vue-quill-editor';
import peHttp from '@/axios/peHttp.js'
export default {
    components:{
        quillEditor
    },
    props:{
        changeActive:{
            type:String
        },
        epKnowledId:{
            type:Number
        }
    },
    data(){
        return {
            abstractDetail:{},
            aboutAbstractList:[],
            addType:'',
            literature:{},
            pagination:{
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{
                title:'',
                isShow:false
            },
            tagList:[],/**所有标签 */
            selectTags:[],/**选中标签 */
            literatureList:[],/**所有文献 */
            tagType:[{
                value:'1',
                text:'疾病类型',
                color:'info',
            },
            {
                value:'2',
                text:'科室',
                color:'sucess',
            },
            {
                value:'3',
                text:'非pe',
                color:'warning',
            },
            {
                value:'4',
                text:'pe',
                color:'danger'

            }],
            changeRecords:[],/**修改记录列表 */
            dialog2:{
                title:'',
                isShow:false,
                formDate:{}
            }
        }
    },
    watch:{
        epKnowledId(newDetail,oldDetail){
            this.getAbstractList();
        }
    },
    mounted(){
        this.getAbstractList();
    },
    methods:{
        getAbstractList(){/**获取文献摘要列表 */
            let self = this;
            let data ={
                type:self.changeActive,
                did:self.epKnowledId,
                pageSize:10,
                currentPage:1
            }
            peHttp.abstractList(data).then(res=>{
                if(res.content.records&&res.content.records.length>0){
                    self.abstractDetail =res.content.records[0];
                    self.addType = 'update';
                    self.getAbstractLiteratureList();
                }else{
                    self.addType = 'insert';
                    self.abstractDetail={
                        content:''
                    };
                }

            })
        },
        getAbstractLiteratureList(){/**获取关联文献列表 */
            let self = this;
            peHttp.abstractInfoList(self.abstractDetail.id).then(res=>{
                self.aboutAbstractList=res.content;
            })
        },
        isShowDialog1(type){
            let self = this;
            if(self.abstractDetail.id==''){
                self.$message.error("请先新增摘要");
                return;
            }
            self.dialog.isShow = true;
            self.dialog.title=`${type=='insert'?'新增':'修改'}关联文献`;
            self.getTagList();
            self.getLiteratureList();
            self.addType =type;
            if(type=='insert'){
                self.literature={
                    docName:'',
                    docType:'',
                    publications:'',
                    publisher:'',
                    publishTime:''
                }
            }
        },
        getTagList(){/**获取所有标签 */
            let self =this;
            peHttp.tagList().then(res=>{
               self.tagList=res.content;
            })
        },
         getLiteratureList(){/**获取所有文献列表 */
            let self = this;
            let data={
                labels:self.selectTags,
                pageSize:self.pagination.pageSize,
                currentPage:self.pagination.currentPage
            };
            self.literatureList=[];
            peHttp.literatureListByLabels(data).then(res=>{
                if(res.content.records&&res.content.records.length>0){
                    res.content.records.forEach(element => {
                        element.level= Number(element.level);
                        let isFlag = false;
                           for(let i=0;i<self.aboutAbstractList.length;i++){
                               if(self.aboutAbstractList[i].id==element.id){
                                   isFlag = true;
                               }
                           }
                           if(!isFlag){
                               self.literatureList.push(element);
                           }
                    });
                }
                self.pagination.total =  res.content.total;
            })
        },
        searchLiterature(){
            this.pagination.currentPage = 1;
           this.getLiteratureList();
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getLiteratureList()
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getLiteratureList()
        },
        handleSelectionChange(val){
             this.selectLiterature = val;
        },
        addRelation(){/**点击关联选中文献 */
           let self  =this;
            if(self.selectLiterature.length>0){
                let data=[];
                self.selectLiterature.forEach(el => {
                    data.push({
                        aid:self.abstractDetail.id,
                        did:el.id
                    })
                });
                peHttp.contentAbstractInfo(data).then(res=>{
                     self.$message.success("文献关联成功！");
                     self.dialog.isShow=false;
                     self.getAbstractLiteratureList();
                },error=>{
                    self.$message.error("文献关联失败！");
                })
            }else{
                 self.$message.error("请至少选择一个文献");
            }
        },
         deleteDate(type,row){/**删除原文献或摘要 */
            let self = this;
            self.$confirm('确认是否删除?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                peHttp.deleteAbstractLiterature(row.relationId).then(res =>{
                            self.getAbstractLiteratureList();
                            self.$message.success("关联文献删除成功！");
                        },error=>{
                            self.$message.error("关联文献删除失败！");
                })
                }).catch(() => {
            });
        },
        isShowDialog2(type,row){
            let self = this;
            self.dialog2.title = `${type==='insert'?'新增':'修改'}申请`;
            self.dialog2.isShow = true;
            self.dialog2.formDate = type==='insert'?{pid:self.id,}:row
        },
        sublimit(){
            let self = this;
            let type = self.dialog2.title.indexOf('新增')>-1?'insert':'update';
            peHttp.addUpdatePeApplyHistory(type).then(res=>{

            })
        }
    }
}
</script>
<style scoped>
.dialog-plate-title{
    margin:16px 0;
}
</style>
